<template>
  <h2>ProgressMiddleAxis</h2>
  <p>
    一种有左右两种端点，原点在中间的进度条。接近0和100时，端点的圆点实心效果切换存在一些边界问题。
  </p>

  <h3>基础用法</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <progress-middle-axis :config="config" :value="20"></progress-middle-axis>
    <progress-middle-axis :config="config" :value="100"></progress-middle-axis>

    <template #code>
      {{ `
<template>
  <progress-middle-axis :config="config" :value="20"></progress-middle-axis>
  <progress-middle-axis :config="config" :value="100"></progress-middle-axis>
</template>

<script setup>
const config = [
  { label: '良好', color: '#33bed1' },
  { label: '标准', color: '#766ce5', valueText: '70%' },
  { label: '风险', color: '#e26e87' },
]
</script>
      ` }}
    </template>
  </code-demo>

  <h3>Attributes</h3>
  <table-info type="props" :data="propsTable"></table-info>
</template>

<script setup>
const config = [
  { label: '良好', color: '#33bed1' },
  { label: '标准', color: '#766ce5', valueText: '70%' },
  { label: '风险', color: '#e26e87' },
]

const propsTable = [
  {
    name: 'config',
    desc: '配置左、中、右3个点的信息。color 为 label 的颜色，也是轴的渐变色。',
    type: 'Array<{ label: string, color: string, valueText?: string }>',
  },
  { name: 'value', desc: '当前进度值，取[0, 100]。', type: 'string' },
]

const code = ``
</script>
